<script setup lang="ts">
import Vditor from 'vditor'
import 'vditor/dist/index.css';
import {getCategoryAllUrl} from "@/api/blog/category.ts";
import {saveArticleUrl} from "@/api/blog/article.ts";
import {encodeText} from "@/utils/blogs.ts";

const vditor = ref()
const originText = ref('' +
    '# 标题1 \n' +
    '## 标题2 \n' +
    '### 标题3 \n' +
    '#### 标题4 \n' +
    '##### 标题5 \n' +
    '###### 标题6 \n' +
    '' +
    '```json  \n' +
    '你好' +
    '``` \n' +
    ' \n'
);
const {proxy}: any = getCurrentInstance()

// 保存
const save = () => {
  console.log(vditor.value.getValue())
  // 1. 校验
  // 转 json
  // 2. 保存文章
  const text = vditor.value.getValue();
  saveArticleUrl({
    ...formData.value,
    artContent: text
  }).then((res: any) => {
    proxy.$modal.msgSuccess(res.message)
  })
}
const categoryList = ref([])
onMounted(() => {
  vditor.value = new Vditor('vditor', {
    width: '100%',
    minHeight: 600,
    cache: {
      enable: false,
    },
    toolbar: [
      "emoji",
      "headings",
      "bold",
      "italic",
      "strike",
      "link",
      "|",
      "list",
      "ordered-list",
      "check",
      "outdent",
      "indent",
      "|",
      "quote",
      "line",
      "code",
      "inline-code",
      "insert-before",
      "insert-after",
      "|",
      "upload",
      "record",
      "table",
      "|",
      "undo",
      "redo",
      "|",
      "fullscreen",
      "edit-mode",
      {
        name: "more",
        toolbar: [
          "both",
          "code-theme",
          "content-theme",
          "export",
          "outline",
          "preview",
          "devtools",
          "info",
          "help",
        ],
      },
      {
        hotkey: '⌘S',
        name: '保存',
        tipPosition: 's',
        tip: '保存文章',
        className: 'right',
        icon: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1465" width="128" height="128"><path d="M323 154H212c-15.464 0-28 12.536-28 28v660c0 15.464 12.536 28 28 28h32V655.255a68 68 0 0 1 19.917-48.083l51.255-51.255A68 68 0 0 1 363.255 536h297.49a68 68 0 0 1 48.083 19.917l51.255 51.255A68 68 0 0 1 780 655.255V870h32c15.464 0 28-12.536 28-28V355.51a28 28 0 0 0-8.201-19.8L701 204.913V372c0 19.882-16.118 36-36 36H359c-19.882 0-36-16.118-36-36V154z m72 0v182h234V154H395z m517 201.51V842c0 55.228-44.772 100-100 100H212c-55.228 0-100-44.772-100-100V182c0-55.228 44.772-100 100-100h426.49a100 100 0 0 1 70.711 29.29l173.51 173.509A100 100 0 0 1 912 355.509zM659.088 608H364.912L316 656.912V870h392V656.912L659.088 608zM530.5 209.5c0-19.882 16.118-36 36-36s36 16.118 36 36v65.164c0 19.883-16.118 36-36 36s-36-16.117-36-36V209.5z" fill="#333333"></path></svg>',
        click() {
          save()
        },
      }
    ]
  })
  // 获取所有的分类
  getCategoryAllUrl().then(res => {
    console.log(res)
    categoryList.value = res.data || []
  })
})

const formData = ref({
  artTitle: '',
  artCategoryId: '',
})
const formRules = ref({
  artTitle: [
    {required: true, message: '请输入文章标题', trigger: 'blur'},
    {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
  ],
  artCategoryId: [
    {required: true, message: '请选择文章分类', trigger: 'change'}
  ]
})

</script>

<template>
  <div class="blog-container">
    <div id="vditor"></div>
    <div class="art-setting">
      <el-form v-model="formData" :rules="formRules" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章标题" prop="artTitle">
              <el-input v-model="formData.artTitle" placeholder="请输入文章标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章封面" prop="artCoverFile">
              <input type="file">
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章分类" prop="artCategoryId">
              <el-select v-model="formData.artCategoryId" :style="{width: '200px'}" placeholder="请选择分类">
                <el-option v-for="item in categoryList" :key="item.bcId" :label="item.bcName"
                           :value="item.bcId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-button type="success" @click="save">发布</el-button>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button>取消</el-button>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>
</template>


<style scoped lang="scss">
.blog-container {
  #vditor {
    width: 1000px;
    margin: 0 auto;
  }

  .art-setting {
    margin: 20px;
  }
}

</style>
